
<template>
	<div>
		<el-tabs v-model:activeKey="activeKey" :tab-position="mode" @tabScroll="callback" @change="handleTabChange" class="demo-tabs">
			<el-tab-pane v-for="(file, index) in disasterFiles" :key="index" :tab="file.name" :label="file.name">
				<iframe :src="file.url+ '#view=FitH,Top'" width="100%" style="min-height: 90vh" allowfullscreen="true"></iframe>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script setup>
import { ref } from 'vue';

const mode = ref('left');
const activeKey = ref(1);
const callback = (val) => {
	console.log(val);
};
const disasterFiles = ref([
	{ name: '供电局电网预防雨雪冰冻灾害应急预案', url: `${window.reqUrl}/pdf/供电局电网预防雨雪冰冻灾害应急预案.pdf` },
	{ name: '关于洪涝灾害应急预案（精选10篇）', url: `${window.reqUrl}/pdf/关于洪涝灾害应急预案（精选10篇）.pdf` },
	{ name: '冻雨处置方案', url: `${window.reqUrl}/pdf/冻雨处置方案.pdf` },
	{ name: '各种应急预案', url: `${window.reqUrl}/pdf/各种应急预案.pdf` },
	{ name: '地震应急预案', url: `${window.reqUrl}/pdf/地震应急预案.pdf` },
	{ name: '地震应急预案 (1)', url: `${window.reqUrl}/pdf/地震应急预案 (1).pdf` },
	{ name: '地震应急预案5篇', url: `${window.reqUrl}/pdf/地震应急预案5篇.pdf` },
	{ name: '地震应急预案范文(7篇)', url: `${window.reqUrl}/pdf/地震应急预案范文(7篇).pdf` },
	{ name: '山洪灾害应急预案', url: `${window.reqUrl}/pdf/山洪灾害应急预案.pdf` },
	{ name: '山洪防汛应急演练方案', url: `${window.reqUrl}/pdf/山洪防汛应急演练方案.pdf` },
	{ name: '山洪预防应急预案（7篇）', url: `${window.reqUrl}/pdf/山洪预防应急预案（7篇）.pdf` },
	{ name: '干旱的应急预案', url: `${window.reqUrl}/pdf/干旱的应急预案.pdf` },
	{ name: '干旱的应急预案1', url: `${window.reqUrl}/pdf/干旱的应急预案1.pdf` },
	{ name: '抗旱应急预案(最新)', url: `${window.reqUrl}/pdf/抗旱应急预案(最新).pdf` },
	{ name: '洪涝灾害应急预案(优秀4篇)', url: `${window.reqUrl}/pdf/洪涝灾害应急预案(优秀4篇).pdf` },
	{ name: '防冰冻雨雪应急预案-12篇', url: `${window.reqUrl}/pdf/防冰冻雨雪应急预案-12篇.pdf` },
	{ name: '防汛抗旱应急预案', url: `${window.reqUrl}/pdf/防汛抗旱应急预案.pdf` },
	{ name: '雾霾应急预案', url: `${window.reqUrl}/pdf/雾霾应急预案.pdf` },
	{ name: '雾霾应急预案 (1)', url: `${window.reqUrl}/pdf/雾霾应急预案 (1).pdf` },
	{ name: '雾霾应急预案方案', url: `${window.reqUrl}/pdf/雾霾应急预案方案.pdf` },
	{ name: '雾霾应急预案方案 (1)', url: `${window.reqUrl}/pdf/雾霾应急预案方案 (1).pdf` },
]);
const handleTabChange = (key) => {
	activeKey.value = key;
};
</script>
<style>
.ant-tabs {
	height: 90vh;
}
.el-tabs__header {
	width: 200px;
	height: 80vh;
}
.el-tabs__nav-scroll{
	height: 80vh !important;
}
.el-tabs__item.is-left {
	text-align: left !important;
}
.el-tabs__nav-scroll{
	overflow-y: scroll;
}
</style>
